<template>
  <div class="attribute-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><Setting /></el-icon>
          属性管理中心
        </h1>
        <p class="page-subtitle">管理公寓的各种属性配置，包括配套设施、标签、房间信息等</p>
      </div>
      <div class="header-stats">
        <div class="stat-card">
          <div class="stat-value">{{ totalStats.facilities }}</div>
          <div class="stat-label">配套设施</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ totalStats.labels }}</div>
          <div class="stat-label">标签类型</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ totalStats.attributes }}</div>
          <div class="stat-label">属性总数</div>
        </div>
      </div>
    </div>

    <!-- 管理模块网格 -->
    <div class="management-grid">
      <div 
        v-for="(module, index) in managementModules" 
        :key="module.id"
        class="module-card"
        :class="{ 'expanded': expandedModule === module.id }"
      >
        <div class="card-header" @click="toggleModule(module.id)">
          <div class="header-left">
            <div class="module-icon" :style="{ background: module.gradient }">
              <el-icon :size="24"><component :is="module.icon" /></el-icon>
            </div>
            <div class="module-info">
              <h3 class="module-title">{{ module.title }}</h3>
              <p class="module-desc">{{ module.description }}</p>
            </div>
          </div>
          <div class="header-right">
            <el-badge :value="module.count" class="item-count" />
            <el-icon class="expand-icon" :class="{ 'rotated': expandedModule === module.id }">
              <ArrowDown />
            </el-icon>
          </div>
        </div>
        
        <div class="card-content" v-show="expandedModule === module.id">
          <component :is="module.component" />
        </div>
      </div>
    </div>

    <!-- 快速操作面板 -->
    <div class="quick-actions">
      <el-card class="action-card">
        <template #header>
          <div class="action-header">
            <el-icon><Lightning /></el-icon>
            <span>快速操作</span>
          </div>
        </template>
        <div class="action-buttons">
          <el-button type="primary" :icon="Plus" @click="quickAdd('facility')">
            添加配套
          </el-button>
          <el-button type="success" :icon="Plus" @click="quickAdd('label')">
            添加标签
          </el-button>
          <el-button type="warning" :icon="Plus" @click="quickAdd('attribute')">
            添加属性
          </el-button>
          <el-button type="info" :icon="Refresh" @click="refreshAll">
            刷新全部
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from 'vue'
import { Setting, ArrowDown, Lightning, Plus, Refresh, Grid, Discount, HomeFilled, Money, Calendar, CreditCard } from '@element-plus/icons-vue'
import SupportFacility from '@/views/apartmentManagement/attributeManagement/components/supportFacility.vue'
import SupportLabel from '@/views/apartmentManagement/attributeManagement/components/supportLabel.vue'
import SupportRoomBase from '@/views/apartmentManagement/attributeManagement/components/supportRoomBase.vue'
import SupportFee from '@/views/apartmentManagement/attributeManagement/components/supportFee.vue'
import SupportTerm from '@/views/apartmentManagement/attributeManagement/components/supportTerm.vue'
import SupportPayment from '@/views/apartmentManagement/attributeManagement/components/supportPayment.vue'

// 当前展开的模块
const expandedModule = ref<string | null>(null)

// 统计数据
const totalStats = reactive({
  facilities: 0,
  labels: 0,
  attributes: 0
})

// 管理模块配置
const managementModules = ref([
  {
    id: 'facility',
    title: '配套信息管理',
    description: '管理公寓的各种配套设施',
    icon: Grid,
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    component: SupportFacility,
    count: 0
  },
  {
    id: 'label',
    title: '标签信息管理',
    description: '管理房间和公寓的标签分类',
    icon: Discount,
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    component: SupportLabel,
    count: 0
  },
  {
    id: 'roombase',
    title: '房间基本信息',
    description: '管理房间的基础属性配置',
    icon: HomeFilled,
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    component: SupportRoomBase,
    count: 0
  },
  {
    id: 'fee',
    title: '杂费信息管理',
    description: '管理各种费用类型和标准',
    icon: Money,
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    component: SupportFee,
    count: 0
  },
  {
    id: 'term',
    title: '租期管理',
    description: '管理租赁期限和相关配置',
    icon: Calendar,
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    component: SupportTerm,
    count: 0
  },
  {
    id: 'payment',
    title: '支付方式管理',
    description: '管理支付方式和相关设置',
    icon: CreditCard,
    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    component: SupportPayment,
    count: 0
  }
])

// 切换模块展开状态
const toggleModule = (moduleId: string) => {
  expandedModule.value = expandedModule.value === moduleId ? null : moduleId
}

// 快速添加操作
const quickAdd = (type: string) => {
  // 展开对应模块
  const moduleMap: Record<string, string> = {
    facility: 'facility',
    label: 'label',
    attribute: 'roombase'
  }
  expandedModule.value = moduleMap[type] || 'facility'
}

// 刷新全部数据
const refreshAll = () => {
  // 这里可以添加刷新逻辑
  console.log('刷新全部数据')
}

// 更新统计数据
const updateStats = () => {
  // 这里可以添加实际的统计逻辑
  totalStats.facilities = 12
  totalStats.labels = 8
  totalStats.attributes = 25
}

onMounted(() => {
  updateStats()
})
</script>

<style scoped lang="scss">
@import './attributeManagement.scss';
</style>
